<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="cn">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>评论页面</title>
    <script type="text/javascript" th:src="@{static/js/jquery-1.8.0.min.js}"></script>
    <link rel="stylesheet" th:href="@{static/css/comment-8c696e42cded7ca81dd18c91.css}">


    <script type="text/javascript" th:src="@{static/js/toastr.min.js}"></script>


    <link rel="stylesheet" th:href="@{static/css/toastr.css}"/>
</head>

<script type="text/javascript">
    toastr.options.positionClass = 'toast-top-center';
</script>

<div class="cmt-warp">
    <!-- 评论 -->
    <div class="comment">
        <!-- 头部 -->
        <div class="cmt-title">
            <em class="cmt-title-icon">
                <i></i><b>实验点评</b>
            </em>
        </div>

        <!--
            作者：lixizheng
            时间：2020-07-17
            描述： 输入框、发表按钮
        -->
        <div class="message" contentEditable='true'></div>
        <div class="But">
            <span class='submit'>发表</span>
        </div>


        <div class="cmt-content">
            <!-- 统计汇总 填写按钮 -->
            <!-- 分割 -->
            <div class="cmt-tab-title">
                <span th:text="'全部评价(' + ${list.size()} + ')'"></span>
            </div>
            <!-- 评论列表 -->
            <div class="cmt-list">
                <!-- 开始 -->
                <div class="cmt-item" th:each="comment: ${list}">
                    <!-- 评价内容 -->
                    <div class="item-content" th:text="${comment.commentContent}">
                    </div>
                    <!-- 评价人 时间  -->
                    <div class="item-info-com">
                        <p>
                            <a href="javascript:" th:title="${comment.userName}" rel="nofollow" th:text="${comment.userName}"></a><em th:text="${comment.createDate}"></em>
                        </p>
                    </div>
                </div>

            </div>

        </div>
    </div>

</div>
</html>

<script>

    //点击发表按扭，发表内容
    $("span.submit").click(function () {
        let txt = $(".message").html(); //获取输入框内容
        if (!txt) {
            $('.message').focus(); //自动获取焦点
            return;
        }

        if (txt.length >= 200){
            toastr.error('输入文字超出200~');
            return;
        }

        let c = String(txt);
        if (c.indexOf(">") !== -1 && c.lastIndexOf("<") !== -1) {
            c = c.substring(c.indexOf(">") + 1, c.lastIndexOf("<"));
            console.log(c);
            txt = c;
        }

        $.ajax({
            type: 'post',
            async: false,
            data: {
                content: txt
            },
            url: "/evaluate/submit",
            success: function (reslut) {
                console.log(reslut);
                if (reslut.msg === "OK"){
                    toastr.success('发表成功~');
                    location.reload();
                }else{
                    toastr.error(reslut.msg);
                }
            }
        });

        $('.message').html('') // 清空输入框
    });

</script>